<template>
  <view class="page">
    <scroll-view :scroll-x="false" :scroll-y="true" :scroll-with-animation="true">
      <view class="pannel" v-if="share.haibaoArr && share.haibaoArr.length > 0">
        <swiper class="poster-list" @change="swiperChange" :indicator-dots="true" :current="currentHaibao" :circular="true" :autoplay="false" previous-margin="-10rpx" next-margin="-10rpx">
          <swiper-item class="item" v-for="item in share.haibaoArr">
            <view class="poster" :style="'width:' + (item.bg_w * item.scale) + 'rpx; height: ' + (item.bg_h * item.scale) + 'rpx;'">
              <image :src="item.bg" style="width: 100%; height: 100%;"></image>
              <image :src="share.qrcode" :style="'left:' + (item.hole_x * item.scale) + 'rpx; top:' + (item.hole_y * item.scale) + 'rpx; width: ' + (item.hole_w * item.scale) + 'rpx; height:' + (item.hole_h * item.scale) + 'rpx;'"></image>
            </view>
          </swiper-item>
        </swiper>
        <view class="btn-group">
          <view class="btn btn-save" @tap="saveToAlbum">保存到相册</view>
        </view>
      </view>
    </scroll-view>
    <canvas canvasId="poster" style="display:block; height: 6000rpx; width: 6000rpx; position: absolute; left: -6000rpx; top: -6000rpx;"></canvas>
  </view>
</template>

<script>
const app = getApp();
export default {
  data() {
    return {
      share: {},
      currentHaibao: 0
    };
  },
  onLoad() {
    this.getShare()
  },
  methods: {
    getShare() {
      var platform = 'wxapp'
      // #ifdef WEB
      platform = 'h5'
      // #endif
      this.$util.request({
        url: '/commission/getShare',
        data: {
          platform: platform
        }
      }).then(res => {
        this.share = res.data
        this.currentHaibao = res.data.defaultHaibao
      })
    },
    swiperChange(e) {
      this.currentHaibao = e.detail.current
    },
    saveToAlbum() {
      const that = this
      const haibaoArr = this.share.haibaoArr
      const currentHaibao = this.currentHaibao
      const haibao = haibaoArr[currentHaibao]
      const qrcode = this.share.qrcode
      // #ifdef MP-WEIXIN
      const context = uni.createCanvasContext('poster')
      var bgOk = false
      var qrcodeOk = false
      uni.showLoading({
        title: '保存中'
      })
      // 下载背景图
      uni.downloadFile({
        url: haibao.bg,
        success: function(res) {
          context.drawImage(res.tempFilePath, 0, 0, haibao.bg_w, haibao.bg_h)
          bgOk = true;
          // 下载二维码
          uni.downloadFile({
            url: qrcode,
            success: function(res) {
              context.drawImage(res.tempFilePath, haibao.hole_x, haibao.hole_y, haibao.hole_w, haibao.hole_h)
              qrcodeOk = true;
            },
            fail: function() {
              that.$util.message('二维码下载失败')
              uni.hideLoading()
            }
          })
        },
        fail: function() {
          that.util.message('海报图下载失败')
          uni.hideLoading()
        }
      })
      var si = setInterval(() => {
        if(bgOk && qrcodeOk) {
          clearInterval(si)
          context.draw()
          uni.hideLoading()
          setTimeout(() => {
            uni.canvasToTempFilePath({
              canvasId: 'poster',
              width: haibao.bg_w,
              height: haibao.bg_h,
              destWidth: haibao.bg_w,
              destHeight: haibao.bg_h,
              quality: 1,
              fileType: 'jpg',
              success: (res) => {
                uni.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                  success: function() {
                    that.$util.message('已保存到相册', 'success')
                  },
                  fail: function(res) {
                    that.$util.message('保存失败：' + JSON.stringify(res), 'error')
                  }
                })
              }
            })
          }, 300)
        }
      }, 500)
      // #endif

      // #ifdef WEB
      const poster = 'https://' + window.location.host + '/api.php/commission/makePoster?bg=' + encodeURIComponent(haibao.bg) + '&qrcode=' + encodeURIComponent(qrcode) + '&hole_w=' + haibao.hole_w + '&hole_h=' + haibao.hole_h + '&hole_x=' + haibao.hole_x + '&hole_y=' + haibao.hole_y;

      this.$util.message('请长按弹出的图片->保存到手机', 'error', function() {
        uni.previewImage({
          urls: [poster]
        })
      })
      // #endif
    }
  }
};
</script>
<style scoped>
.page {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 110rpx;
  overflow: hidden;
}
.tabs {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx;
  padding-left: 12rpx;
  box-sizing: border-box;
}
.pannel {
  width: 690rpx;
  margin: 60rpx auto 0 auto;
  background: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  overflow: hidden;
}

.pannel .title {
  width: 100%;
  padding: 0 0 30rpx 0;
  font-size: 28rpx;
  font-weight: bold;
}

.pannel .textarea {
  font-size: 28rpx;
  color: #1b1c1c;
  line-height: 36rpx;
  background: #f3f6f6;
  border-radius: 20rpx;
  padding: 20rpx;
  min-height: 140rpx;
  border: 1px solid #ea4679;
}
.pannel .btn-group {
  width: 100%;
  height: 88rpx;
  margin: 120rpx 0 30rpx 0;
  text-align: center;
}
.pannel .btn-group view {
  display: inline-block;
}
.pannel .btn-group .btn {
  width: 200rpx;
  margin: 0 auto;
  font-size: 28rpx;
  font-weight: 500;
  text-align: center;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 44rpx;
  background: #ea4679;
  color: #fff;
  border: 1px solid #ea4679;
  letter-spacing: 1px;
}
.pannel .btn-group .btn:active {
  opacity: 0.8;
}

.pannel .btn-group .btn-next {
  margin-left: 30rpx;
  background: #fff;
  color: #ea4679;
}

.pannel .btn-group .btn-save {
  width: 500rpx;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}

.poster-list {
  width:100%;
  height: 690rpx;
  overflow: hidden;
}
.poster-list .item {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.poster {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0 auto;
  overflow: hidden;
}
.poster image {
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>
